import type { ActionType, ProColumns } from '@/components/Pro/';
import { ProTable } from '@/components/Pro/';
import { sysLogRecordControllerList } from '@/services/ess/sysLog';
import dayjs from 'dayjs';
import { useRef, useState } from 'react';
import { useIntl } from 'umi';
import './Common.less';

interface props {
  orgType?: string;
  orgDirc?: any;
}

const TableList: React.FC<props> = (props) => {
  const { orgType, orgDirc } = props;
  const actionRef = useRef<ActionType>();
  const intl = useIntl();
  const [isCollapsed, setIsCollapsed] = useState(true);
  const columns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'systemManagement.generalProcedure.SN' }),
      hideInSearch: true,
      dataIndex: 'pageIndex',
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.systemLogMenu.userAccount' }),
      dataIndex: 'userName',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.systemLogMenu.userName' }),
      dataIndex: 'nickName',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.systemLogMenu.phoneNumber' }),
      dataIndex: 'phone',
      hideInSearch: true,
    },

    {
      title: intl.formatMessage({ id: 'systemManagement.systemLogMenu.operationType' }),
      hideInSearch: true,
      dataIndex: 'type',
      render: (_, record) => {
        let name = orgDirc.find((res) => res.value === record.type)?.label;
        return <span>{name}</span>;
      },
    },
    {
      disable: true,
      title: intl.formatMessage({ id: 'systemManagement.systemLogMenu.userInformation' }),
      hideInTable: true,
      dataIndex: 'useMessage',
      fieldProps: {
        placeholder: intl.formatMessage({ id: 'systemManagement.systemLogMenu.userNamePlacehold' }),
      },
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.systemLogMenu.operationResults' }),
      dataIndex: 'operatorResult',
      ellipsis: true,
      valueEnum: {
        1: {
          text: intl.formatMessage({ id: 'global.successful' }),
          status: '1',
        },
        0: {
          text: intl.formatMessage({ id: 'global.failed' }),
          status: '0',
        },
      },
      render: (_, record) => {
        if (record.operatorResult) {
          return (
            <span style={{ color: '#56D433' }}>
              {intl.formatMessage({ id: 'global.successful' })}
            </span>
          );
        } else {
          return (
            <span style={{ color: '#FF5353' }}>{intl.formatMessage({ id: 'global.failed' })}</span>
          );
        }
      },
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.systemLogMenu.ipAddress' }),
      dataIndex: 'ipAddress',
      hideInSearch: true,
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.systemLogMenu.logContent' }),
      dataIndex: 'content',
      width: 250,
      order: 1,
    },
    {
      title: intl.formatMessage({ id: 'systemManagement.systemLogMenu.callTime' }),
      dataIndex: 'createTime',
      valueType: 'dateTimeRange',
      width: 160,
      search: {
        transform: (value: any) => ({ startTime: value[0], endTime: value[1] }),
      },
      render: (_, record) => record.createTime,
      initialValue: [dayjs().subtract(1, 'week').startOf('day'), dayjs().endOf('day')],
    },
  ];
  const handleSearchToggle = (collapsed: boolean) => {
    setIsCollapsed(collapsed);
  };
  return (
    <div style={{ padding: '22 24 16' }}>
      <ProTable
        headerTitle=" "
        style={{ position: 'relative', zIndex: '10' }}
        rowKey="id"
        params={{ type: orgType }}
        columns={columns}
        actionRef={actionRef}
        request={async (params) => {
          const result = await sysLogRecordControllerList({ ...params });
          console.log(result, 'xsjdfj');
          return result;
        }}
        search={{
          className: `searchPosInline ${isCollapsed ? '' : 'searchCollapse'}`,
          onCollapse: handleSearchToggle,
        }}
        toolbar={{
          className: 'toobalrZindex',
          actions: [
            // eslint-disable-next-line react/button-has-type
          ],
        }}
      />
    </div>
  );
};

export default TableList;
